<!--
 * @Author: ITDLCL
 * @Date: 2024-11-16 17:24:24
 * @LastEditors: ITDLCL
 * @Description:
-->
<!-- 首页 - category -->
<template>
  <view class="category">
    <view
      class="category_cell"
      v-for="(item, index) in cateList"
      :key="index"
      :style="item.style"
      @click="categoryClick(item.path)"
    >
      <image
        :src="`https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/images/home/category_img_0${
          index + 1
        }.png`"
        mode="widthFix"
        class="desc-img"
      ></image>
      <image
        src="https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/images/icon/arrow.png"
        :style="item.arrow_style"
        mode="widthFix"
        class="arrow"
      ></image>
      <view class="text" :style="item.text_style">
        <text class="siyuan-medium">{{ item.name }}</text>
        <view class="intel-one-mono-regular es-text">{{ item.es_name }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
let cateList = ref([
  {
    name: "活动报名",
    es_name: "Application",
    style: "top:328rpx;left:68rpx;width:196rpx",
    arrow_style: "right:3px;top:-31px;transform: rotate(90deg);",
    text_style: "left:85px;top:-16px;",
    path: "/pages/activity/index",
  },
  {
    name: "园区地图",
    es_name: "Map",
    style: "top:336rpx;right:56rpx;width:168rpx",
    arrow_style: "left: -32px;bottom:3px;transform: rotate(-90deg);",
    text_style: "left:-51px;bottom:-43px;",
    path: "/pages/empty/index",
  },
  {
    name: "共享预约",
    es_name: "Reservation",
    style: "bottom:160rpx;left:48rpx;width:120rpx",
    arrow_style: "right:-86px;top:-24px;transform: rotate(90deg);",
    text_style: "left:60px;top:-14px;",
    path: "/subscribe/index",
  },
  {
    name: "停车缴费",
    es_name: "Parking",
    style: "bottom:122rpx;right:56rpx;width:178rpx",
    arrow_style: "top:41px;left:-28px;transform: rotate(-90deg);",
    text_style: "left:-74px;top:68px;",
    path: "/park/index",
  },
]);
const categoryClick = path => {
  if (!path) {
    uni.showToast({
      title: "排期中...",
      icon: "none",
    });
    return;
  }
  uni.navigateTo({
    url: path,
  });
};
</script>

<style lang="scss" scoped>
.category {
  position: relative;
  width: 100%;
  height: 1002rpx;

  &_cell {
    position: absolute;
    .desc-img {
      width: 100%;
    }
    .arrow {
      position: absolute;
      width: 20rpx;
    }
    .text {
      position: absolute;
      text-align: center;
      text {
        font-size: 30rpx;
        line-height: 30rpx;
      }
      .es-text {
        margin: 0 auto;
        background-color: #000000;
        font-size: 24rpx;
        color: #ffffff;
        line-height: 36rpx;
        text-align: center;
      }
    }
  }
  &_cell:nth-child(odd) {
    .text > .es-text {
      width: 168rpx;
    }
  }
  &_cell:nth-child(even) {
    .text > .es-text {
      width: 102rpx;
    }
  }
}
</style>
